import React from 'react';
import {Popconfirm} from 'antd';
import _ from 'lodash';
import Table, {
    setColumnKeys,
    yesRender
} from '../_/table';
import {context} from '../_';
import redux from '../_/redux';

const pageTypes = 'diagnosis'.split(',');
let pageSize = 100;

const isPage = (type) => _.indexOf(pageTypes, type) >= 0;
const loader = (...args) => {
    let {load, params} = args[0];
    let p = args[0];
    let q = args[1] || {};
    if (!load) {
        load = args[1].load;
        params = args[1].params;
        q = {};
        p = args[1];
    }
    const {type} = params;
    if (isPage(type)) {
        q = _.extend({pageSize, page: 1}, q);
    }
    load(p, q);
};

@context('params')
@redux('dict', {
    data: ({params}) => {
        const {type} = params;
        return type;
    },
    loader,
    actions: ['load', 'del', 'modify']
})
export default class Table1 extends React.Component {
    componentWillReceiveProps(props) {
        const {type} = props.params;
        const {type: oldType} = this.props.params;
        if (type !== oldType) {
            loader(props);
        }
    }

    render() {
        const {data = [], params: {type}} = this.props;
        const {data: dataSource = data || [], count} = data;
        const onChange = (page, size) => {
            if (size !== undefined && size !== pageSize) {
                page = 1;
                pageSize = size;
            }
            loader(this.props, {page});
        };
        const pagination = isPage(type)
            ?
        {
            showSizeChanger: true,
            pageSizeOptions: ['50', '100', '200', '300'],
            total: count,
            pageSize,
            onChange,
            onShowSizeChange: onChange
        }
            : false;
        const columns = [{
            title: '编码',
            dataIndex: 'Code'
        }, {
            title: '名称',
            dataIndex: 'Name'
        }, {
            title: '检索码',
            dataIndex: 'NameJp'
        }, {
            title: '显示序号',
            dataIndex: 'DisplayOrder'
        }, {
            title: '状态',
            dataIndex: 'Status',
            render: yesRender
        }, {
            title: '操作',
            render: (val, data) => (
                <span>
                    <a className="blue" onClick={() => this.props.onState('edit', data)}>编辑</a>
                    <span className="ant-divider"/>
                    <Popconfirm
                        title="确定要删除当前记录吗"
                        onConfirm={() => this.props.del(data, this.props)}
                        okText="确定" cancelText="取消"
                    >
                        <a className="red">删除</a>
                    </Popconfirm>
                    <span className="ant-divider"/>
                    <a
                        className={data.Status ? 'red' : 'blue'}
                        onClick={() => this.props.modify({...data, Status: data.Status ? 0 : 1}, {params: {type: this.props.params.type}})}
                    >{data.Status ? '停用' : '启动'}</a>
                </span>
            )
        }];
        setColumnKeys(columns);

        return (
            <div className="w100 padding-t">
                <Table
                    pagination={pagination}
                    columns={columns}
                    dataSource={dataSource}
                    {...this.props}
                />
            </div>
        )
            ;
    }
}
